<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<div class="main">
				<div class="main-content">
					<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="120px">
						<el-row :gutter="24">
							<el-col :span="24" class="mb20">
								<el-form-item label="用户名" prop="username">
									<el-input v-model="form.username" placeholder="请输入用户名" />
								</el-form-item>
							</el-col>
							<el-col :span="24" class="mb20">
								<el-form-item label="原密码" prop="oldPasswod">
									<el-input v-model="form.oldPasswod" type="password" placeholder="请输入原密码" />
								</el-form-item>
							</el-col>
							<el-col :span="24" class="mb20">
								<el-form-item label="新密码" prop="NewPasswod">
									<el-input v-model="form.NewPasswod" type="password" placeholder="请输入新密码" />
								</el-form-item>
							</el-col>
							<el-col :span="24" class="mb20">
								<el-form-item label="确认密码" prop="newPassword_n">
									<el-input v-model="form.newPassword_n" type="password" placeholder="请输入确认密码" />
								</el-form-item>
							</el-col>
							<el-col :span="18" class="mb20">
								<el-form-item label="验证码" prop="code">
									<el-input v-model="form.code" placeholder="请输入验证码" />
								</el-form-item>
							</el-col>
							<el-col :span="6" class="mb20">
								<img class="code-img" src="https://tse3-mm.cn.bing.net/th/id/OIP-C.XAyxdYyZAJD9N6S8sS3puAHaC0?w=313&h=129&c=7&r=0&o=5&pid=1.7" alt="" srcset="">
							</el-col>
							<el-col :span="24" class="mb20">
								<div class="btn-wrap">
									<el-button class="btn" type="primary" size="large" @click="onSubmit">修改</el-button>
								</div>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="account">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { useMessage, useMessageBox } from '/@/hooks/message';

// 定义变量内容
const dataFormRef = ref();

// 提交表单数据
const form = reactive({
	id: '',
	username: '',
	oldPasswod: '',
	NewPasswod: '',
	newPassword_n: '',
	code: '',
});

// 定义校验规则
const dataRules = ref({
	username: [
		{ required: true, message: '用户名不能为空', trigger: 'blur' },
	],
	oldPasswod: [
		{ required: true, message: '密码不能为空', trigger: 'blur' },
		{
			min: 6,
			max: 20,
			message: '用户密码长度必须介于 5 和 20 之间',
			trigger: 'blur',
		},
	],
	NewPasswod: [
		{ required: true, message: '密码不能为空', trigger: 'blur' },
		{
			min: 6,
			max: 20,
			message: '用户密码长度必须介于 5 和 20 之间',
			trigger: 'blur',
		},
	],
	newPassword_n: [
		{ required: true, message: '密码不能为空', trigger: 'blur' },
		{
			min: 6,
			max: 20,
			message: '用户密码长度必须介于 5 和 20 之间',
			trigger: 'blur',
		},
	],
	code: [
		{ required: true, message: '验证码不能为空', trigger: 'blur' },
	],
});

// 提交
const onSubmit = () => {
	dataFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false;
		}
		useMessage().success('修改成功');
		// putObj(form)
		// 	.then(() => {
		// 		useMessage().success('修改成功');
		// 		visible.value = false; // 关闭弹窗
		// 		emit('refresh');
		// 	})
		// 	.catch((err: any) => {
		// 		useMessage().error(err.msg);
		// 	});
	});
};

// 初始化表单数据
const getsysScheduleData = (id: string) => {
	// 获取数据
	getList(id).then((res: any) => {
		Object.assign(form, res.data);
	});
};

// 获取数据
function getList() {
	return new Promise((resove, resject) => {
		setTimeout(() => {
			let data = {
				code: 0,
				msg: null,
				data: [
					{
						userName: 'admin',
						name: '张三',
						Phone: '15788445544',
						WorkUnit: '工作单位',
						WorkPhone: '754466',
						email: 'xxxx@eme.com',
					},
				],
				ok: true,
			};

			resove(data);
		}, 500);
	});
}
</script>
<style lang="scss" scoped>
.main {
	display: flex;
	//align-items: center;
	flex-direction: column;
	padding: 40px;
	.main-content{
		width: 400px;
	}
}
.code-img{
	height: 36px;
	float: right;
}
.btn-wrap{
	display: flex;
	flex-direction: row-reverse;
	.btn{
		width: 280px;
	}
}
</style>
